import { useState } from 'react';
import { InputNumber } from 'antd';
import produce from 'immer';
import './index.less';

/**
 * 盒模型
 * 1.支持margin padding
 * 2.支持position
 */

const marginStyle = {
    'margin-left': null,
    'margin-top': null,
    'margin-right': null,
    'margin-bottom': null,
}

const paddingStyle = {
    'padding-left': null,
    'padding-top': null,
    'padding-right': null,
    'padding-bottom': null,
}

const positionStyle = {
    'left': null,
    'top': null,
    'right': null,
    'bottom': null,
}

const getCls = i => {
    let cls = '';
    switch (i) {
        case 1: cls = 'top'; break;
        case 2: cls = 'right'; break;
        case 3: cls = 'bottom'; break;
        default: cls = 'left'; break;
    }
    return cls;
}

export interface BoxModelProps {
    type?: 'position' | 'layout';  // 默认'layout'
    'margin-left'?: number;
    'margin-top'?: number;
    'margin-right'?: number;
    'margin-bottom'?: number;
    'padding-left'?: number;
    'padding-top'?: number;
    'padding-right'?: number;
    'padding-bottom'?: number;
    'left'?: number;
    'top'?: number;
    'right'?: number;
    'bottom'?: number;
}

export default function BoxModel(props: BoxModelProps) {
    const { type } = props;

    const [style, setStyle] = useState({
        ...marginStyle,
        ...paddingStyle,
    })

    const onChange = (e, key) => {
        console.log(e, key);
        const nextState = produce(style, draft => {
            draft[key] = e;
        })
        setStyle(nextState);
    }

    const isPosition = type === 'position';
    const modelStyle = isPosition ? positionStyle : marginStyle;


    return <div className="box-model">
        {  !isPosition && <div className="box-text">margin</div> }
        {Object.keys(modelStyle).map((key, i) => {
            return <InputNumber placeholder="0" controls={false} key={key} className={getCls(i)} value={style[key]} onChange={(e) => onChange(e, key)} />
        })}

        {
            isPosition ?
                <div className='box-content'></div>
                :
                <div className='box-inner'>
                    {  !isPosition && <div className="box-text">padding</div> }
                    {Object.keys(paddingStyle).map((key, i) => {
                        return <InputNumber placeholder="0" controls={false} key={key} className={getCls(i)} value={style[key]} onChange={(e) => onChange(e, key)} />
                    })}
                    <div className='box-content'></div>
                </div>
        }
        <div className='line lt'></div>
        <div className='line lb'></div>
        <div className='line rt'></div>
        <div className='line rb'></div>
    </div>
}